<style lang="less">
	#role .ivu-card-extra{
		top: 10px;
	}
</style>

<template>
    <div id="role">
    	<Row :gutter="10">
            <Col span="10">
                <Card>
                	<p slot="title">
			            <Icon type="person-add"></Icon>
			            <span>角色管理</span>
			        </p>
			        <Button @click="showAddRole = true" slot="extra" type="success">添加角色</Button>
			        <Table :loading="loading" border :columns="columns" :data="roleList" @on-row-click="getRolePermissionByRoleId" :highlight-row="true" size="small" style="cursor: pointer;"></Table>
				</Card>
            </Col>
            <Col span="14">
                <Card>
                	<p slot="title">
			            <Icon type="person-add"></Icon>
			            <span>权限配置</span>
			            <span v-if="role_id" style="position: absolute;right: 15px;top: 10px;"><Button type="success" @click="assignsPermission()">保存</Button></span>
			        </p>
                	<Tabs v-if="role_id">
			    		<TabPane :label="permission.title" v-for="(permission,index) in permissionList" :key="index">
				        	<ul v-for="(model , index) in permission.children" style="margin-bottom: 10px;">
				        		<CheckboxGroup v-model="checkedPermissionList" >
									<permissionTree :model="model" :checkedPermissionList="checkedPermissionList" ></permissionTree>
								</CheckboxGroup>
				        	</ul>
				        </TabPane>
			        </Tabs>
			        <div v-if="!role_id" style="max-height: 750px;min-height: 100px; text-align: center; padding-top: 40px;">
			        	<h3>请选择左侧角色</h3>
			        </div>
				</Card>
            </Col>
        </Row>
        
        <addRole v-if="showAddRole" v-model="showAddRole" @getRoleList="getRoleList" ></addRole>
    	<editRole v-if="showEditRole" v-model="showEditRole" @getRoleList="getRoleList" :role_id="role_id"></editRole>
    </div>
</template>

<script>
import permissionTree from './components/permissionTree.vue';
import addRole from './components/addRole.vue';
import editRole from './components/editRole.vue';

export default {
    name: 'role_index',
    components: {
    	permissionTree,
    	addRole,
    	editRole
    },
    data () {
        return {
        	loading: true,
        	showAddRole: false,
        	showEditRole: false,
        	columns: [
				{
					title: '序号',
					type: 'index',
					width: 70,
					align: 'left'
				},
				{
					title: '角色名称',
					key: 'name',
					align: 'left'
				},
				{
					title: '操作',
					align: 'center',
					width:150,
					render: (h, params) => {
						
						return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                    	this.role_id = params.row.id;
                                    	this.showEditRole = true;
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                    	this.$Modal.confirm({
							                content: '<p>确认要删除角色吗！</p>',
							                onOk: () => {
							                    this.$axios.post(
										        	'Role/deleteRole.do',
										        	{id: params.row.id}
										        ).then(res => {
										        	if(res.data == 1){
										        		this.$Notice.success({title: '删除成功！'});
										        		this.getRoleList();
										        		this.role_id = null;
										        	}else {
										        		this.$Notice.warning({title: "有用户使用该角色，不能删除！"});
										        	}
										        });
							                }
							            });
                                    }
                                }
                            }, '删除')
                        ]);
                    }
				}
			],
				
        	role_id: null,
            roleList: [],
            permissionList: [],
            checkedPermissionList: [],
            permissionVOList: [],
        };
    },
    watch: {
        'checkedPermissionList' (curVal, oldVal) {// 根权限下没有被选中的权限时，移除根权限id
        	this.permissionList.forEach( permission => {
        		var flag = true;
        		this.permissionVOList.forEach( permissionVO => {
        			if(permissionVO.pid == permission.id && this.checkedPermissionList.indexOf(permissionVO.id) != -1){
        				flag = false;
        			}
        		});
        		if(flag && this.checkedPermissionList.indexOf(permission.id) != -1){
        			this.checkedPermissionList.splice(this.checkedPermissionList.indexOf(permission.id), 1);
        		}
        	});
        },
    },
    computed:{},
    created(){
	    this.getRoleList();
        this.$axios.post(
        	'Permission/getPermissionList.do'
        ).then(res => {
        	this.permissionList = res.data.permissionList;
        	this.permissionVOList = res.data.permissionVOList;
        });
	},
	mounted() {
		//勾选下级权限
        this.bus.$on('clickBox', (checkedPermissionId, watchCheckbox) => {
       		if(!watchCheckbox){
       			this.addChildId(checkedPermissionId);
       		}
		});
		this.bus.$on('checkedPermission', (checkedPermissionId, watchCheckbox) => {
			if(watchCheckbox == false){
				this.delChildId(checkedPermissionId);
			}
			if(watchCheckbox == true){
				this.addParentId(checkedPermissionId);
			}
		});
	},
    methods: {
    	getRoleList(){
    		this.$axios.post(
	        	'Role/getRoleList.do'
	        ).then(res => {
	        	this.roleList = res.data;
	        	this.loading = false;
	        });
    	},
    	addParentId(checkedPermissionId){
    		for(var i=0; i<this.permissionVOList.length; i++) {
    			var permission = this.permissionVOList[i];
    			if(permission.id == checkedPermissionId){
    				if(this.checkedPermissionList.indexOf(permission.pid) == -1 && permission.pid != "0"){
    					this.checkedPermissionList.push(permission.pid);
    				}
    				this.addParentId(permission.pid);
    				break;
    			}
    		}
    	},
    	addChildId(checkedPermissionId){
    		var permission_ids = [];
    		this.permissionVOList.forEach((permission, index)=>{//筛选出下级权限
    			if(permission.pid == checkedPermissionId){
    				permission_ids.push(permission.id);
    			}
    		});
    		permission_ids.forEach((permission_id, index)=>{
    			if(this.checkedPermissionList.indexOf(permission_id) == -1){//如果checkedPermissionList中没有该权限id，添加
	    			this.checkedPermissionList.push(permission_id);
	    		}
    			this.addChildId(permission_id);
    		});
    	},
    	delChildId(checkedPermissionId){
    		for(var i=0; i<this.permissionVOList.length; i++) {
    			var permission = this.permissionVOList[i];
    			if(permission.pid == checkedPermissionId){//如果权限的父级id等于被选中的id，删除该id的子id
    				if(this.checkedPermissionList.indexOf(permission.id) != -1){
    					this.checkedPermissionList.splice(this.checkedPermissionList.indexOf(permission.id), 1);
    					this.delChildId(permission.id);
    				}
    			}
    		}
    	},
    	getRolePermissionByRoleId(row) {
    		this.role_id = row.id;
    		this.checkedPermissionList = [];
    		this.$axios.post(
	        	'Role/getRolePermissionByRoleId.do',
	        	{role_id: row.id}
	        ).then(res => {
	        	console.log(res.data)
	        	res.data.forEach( rolePermission => {
	        		this.checkedPermissionList.push(rolePermission.permission_id);
	        	})
	        });
    	},
    	assignsPermission() {
    		this.$axios.post(
	        	'Role/assignsPermission.do',
	        	{role_id: this.role_id, checkedPermissionList: this.checkedPermissionList}
	        ).then(res => {
	        	this.$Modal.success({title: "消息提示", content: "配置成功！"});
	        });
    	},
    }
};
</script>
